{% block sw_mail_template_detail %}
<sw-page class="sw-mail-template-detail">

    {% block sw_mail_template_detail_header %}
    <template #smart-bar-header>
        <h2 v-if="mailTemplate">
            {{ $tc('sw-mail-template.detail.textHeadlineEdit') }}
        </h2>
        <h2
            v-else
            class="sw-mail-template-detail__empty-title"
        >
            {{ $tc('sw-mail-template.detail.textHeadline') }}
        </h2>
    </template>
    {% endblock %}

    {% block sw_mail_template_detail_actions %}
    <template #smart-bar-actions>
        {% block sw_mail_template_detail_actions_abort %}
        <mt-button
            v-tooltip.bottom="{
                message: 'ESC',
                appearance: 'light'
            }"
            :disabled="isLoading"
            variant="secondary"
            size="default"
            @click="onCancel"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_mail_template_detail_actions_save %}
        <sw-button-process
            v-tooltip.bottom="tooltipSave"
            class="sw-mail-template-detail__save-action"
            variant="primary"
            :is-loading="isLoading"
            :process-success="isSaveSuccessful"
            :disabled="!allowSave || undefined"
            @update:process-success="saveFinish"
            @click.prevent="onSave"
        >
            {{ $tc('sw-mail-template.detail.buttonSave') }}
        </sw-button-process>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_mail_template_detail_language_switch %}
    <template #language-switch>
        <sw-language-switch
            :save-changes-function="saveOnLanguageChange"
            :abort-change-function="abortOnLanguageChange"
            @on-change="onChangeLanguage"
        />
    </template>
    {% endblock %}

    {% block sw_mail_template_detail_content %}
    <template #content>
        <sw-card-view sidebar>
            <template v-if="isLoading">
                <sw-skeleton variant="detail-bold" />
                <sw-skeleton />
            </template>

            <template v-else>
                {% block sw_mail_template_detail_content_language_info %}
                <sw-language-info
                    :entity-description="placeholder(mailTemplate.mailTemplateType, 'name', $tc('sw-mail-template.detail.textHeadline'))"
                />
                {% endblock %}

                {% block sw_mail_template_detail_basic_info %}
                <mt-card
                    :title="$tc('sw-mail-template.detail.basic.titleCard')"
                    position-identifier="sw-mail-template-detail-basic-info"
                >
                    {% block sw_mail_template_basic_form_mail_type_field %}
                    <sw-entity-single-select
                        id="mailTemplateTypes"
                        v-model:value="mailTemplate.mailTemplateTypeId"
                        name="sw-field--mailTemplate-mailTemplateTypeId"
                        entity="mail_template_type"
                        required
                        show-clearable-button
                        :label="$tc('sw-mail-template.detail.basic.labelMailType')"
                        :placeholder="$tc('sw-mail-template.detail.basic.placeholderMailType')"
                        :disabled="!acl.can('mail_templates.editor') || undefined"
                        :error="mailTemplateMailTemplateTypeIdError"
                        @update:value="onChangeType"
                    />
                    {% endblock %}

                    {% block sw_mail_template_basic_form_description_field %}
                    <mt-textarea
                        v-model="mailTemplate.description"
                        name="sw-field--mailTemplate-description"
                        :label="$tc('sw-mail-template.detail.basic.labelDescription')"
                        :placeholder="$tc('sw-mail-template.detail.basic.placeholderDescription')"
                        :disabled="!acl.can('mail_templates.editor') || undefined"
                    />
                    {% endblock %}
                </mt-card>
                {% endblock %}

                {% block sw_mail_template_detail_options_info %}
                <mt-card
                    position-identifier="sw-mail-template-detail-options-info"
                    :title="$tc('sw-mail-template.detail.options.titleCard')"
                >
                    <sw-container
                        columns="repeat(auto-fit, minmax(250px, 1fr))"
                        gap="0 30px"
                        class="sw-mail-template-detail-options__container"
                    >
                        <div class="sw-mail-template-detail__options-info-wrapper">

                            {% block sw_mail_template_options_form_subject_field %}

                            <mt-text-field
                                v-model="mailTemplate.subject"
                                name="sw-field--mailTemplate-subject"
                                required
                                :label="$tc('sw-mail-template.detail.options.labelSubject')"
                                :placeholder="placeholder(mailTemplate, 'subject', $tc('sw-mail-template.detail.options.placeholderSubject'))"
                                :disabled="!acl.can('mail_templates.editor') || undefined"
                                :error="mailTemplateSubjectError"
                            />
                            {% endblock %}
                        </div>

                        {% block sw_mail_template_options_form_sender_name_field %}

                        <mt-text-field
                            v-model="mailTemplate.senderName"
                            name="sw-field--mailTemplate-senderName"
                            :label="$tc('sw-mail-template.detail.options.labelSenderName')"
                            :placeholder="placeholder(mailTemplate, 'senderName', $tc('sw-mail-template.detail.options.placeholderSenderName'))"
                            :disabled="!acl.can('mail_templates.editor') || undefined"
                        />
                        {% endblock %}
                    </sw-container>
                </mt-card>
                {% endblock %}

                {% block sw_mail_template_detail_attachments_info %}
                <mt-card
                    :title="$tc('sw-mail-template.detail.media.titleCard')"
                    position-identifier="sw-mail-template-detail-atttachments-info"
                >
                    {% block sw_mail_template_detail_attachments_info_upload %}
                    <sw-upload-listener
                        v-if="mailTemplate.id"
                        auto-upload
                        :upload-tag="mailTemplate.id"
                        @media-upload-finish="successfulUpload"
                    />

                    <sw-media-upload-v2
                        v-if="mailTemplate.id"
                        variant="regular"
                        default-folder="mail_template"
                        :upload-tag="mailTemplate.id"
                        :file-accept="fileAccept"
                        :disabled="!acl.can('mail_templates.editor') || undefined"
                        @media-drop="onMediaDrop"
                        @media-upload-sidebar-open="openMediaSidebar"
                    />
                    {% endblock %}

                    {% block sw_mail_template_detail_attachments_info_grid %}
                    <sw-data-grid
                        v-if="mailTemplateMedia && mailTemplateMedia.length > 0"
                        class="sw-mail-template-detail__attachments-info-grid"
                        :data-source="mailTemplateMedia"
                        :columns="mediaColumns"
                        :full-page="false"
                        :show-settings="false"
                        :allow-column-edit="false"
                        :allow-inline-edit="false"
                        :compact-mode="false"
                        :show-selection="acl.can('mail_templates.editor') || undefined"
                        @selection-change="onSelectionChanged"
                    >
                        <template #preview-fileName="{ item }">
                            {% block sw_mail_template_detail_attachments_info_grid_preview %}
                            <sw-media-preview :source="item.id" />
                            {% endblock %}
                        </template>

                        <template #actions="{ item }">
                            {% block sw_mail_template_detail_attachments_info_grid_actions %}
                            <sw-context-menu-item
                                v-tooltip.bottom="{
                                    message: $tc('sw-privileges.tooltip.warning'),
                                    disabled: acl.can('mail_templates.editor') || undefined,
                                    showOnDisabledElements: true
                                }"
                                variant="danger"
                                :disabled="!acl.can('mail_templates.editor') || undefined"
                                @click="onDeleteMedia(item.id)"
                            >
                                {{ $tc('global.default.delete') }}
                            </sw-context-menu-item>
                            {% endblock %}
                        </template>

                        <template #bulk>
                            {% block sw_mail_template_detail_attachments_info_grid_bulk %}
                            <a
                                class="link link-danger"
                                role="link"
                                tabindex="0"
                                @click="onDeleteSelectedMedia"
                                @keydown.enter="onDeleteSelectedMedia"
                            >
                                {{ $tc('global.default.delete') }}
                            </a>
                            {% endblock %}
                        </template>
                    </sw-data-grid>
                    {% endblock %}
                </mt-card>
                {% endblock %}

                {% block sw_mail_template_detail_mail_text_info %}
                <mt-card
                    :title="$tc('sw-mail-template.detail.mailText.titleCard')"
                    position-identifier="sw-mail-template-detail-text-info"
                >
                    {% block sw_mail_template_mail_text_form_content_plain_field %}
                    <sw-code-editor
                        ref="plainEditor"
                        :key="`${mailTemplate.mailTemplateTypeId}plain`"
                        v-model:value="mailTemplate.contentPlain"
                        name="content_plain"
                        completion-mode="entity"
                        :label="$tc('sw-mail-template.detail.mailText.labelContentPlain')"
                        :placeholder="placeholder(mailTemplate, 'contentPlain', $tc('sw-mail-template.detail.mailText.placeholderPlain'))"
                        :completer-function="outerCompleterFunction"
                        :editor-config="editorConfig"
                        :disabled="!acl.can('mail_templates.editor')"
                        :error="mailTemplateContentPlainError"
                        required
                    />
                    {% endblock %}

                    {% block sw_mail_template_mail_text_form_content_html_field %}
                    <sw-code-editor
                        ref="htmlEditor"
                        :key="`${mailTemplate.mailTemplateTypeId}html`"
                        v-model:value="mailTemplate.contentHtml"
                        name="content_html"
                        completion-mode="entity"
                        :label="$tc('sw-mail-template.detail.mailText.labelContentHtml')"
                        :placeholder="placeholder(mailTemplate, 'contentHtml', $tc('sw-mail-template.detail.mailText.placeholderHtml'))"
                        :completer-function="outerCompleterFunction"
                        :editor-config="editorConfig"
                        :disabled="!acl.can('mail_templates.editor')"
                        :error="mailTemplateContentHtmlError"
                        required
                    />
                    {% endblock %}
                </mt-card>
                {% block sw_mail_template_detail_preview_modal %}
                <sw-modal
                    v-if="mailPreview"
                    class="sw-mail-template-preview-modal"
                    :title="$tc('sw-mail-template.detail.previewModalTitle')"
                    :is-loading="isLoading"
                    @modal-close="onCancelShowPreview"
                >
                    <template v-if="!isLoading">
                        <span v-html="mailPreview"></span>
                    </template>

                    {% block sw_mail_template_detail_preview_modal_footer %}
                    <template #modal-footer>
                        {% block sw_mail_template_detail_preview_modal_footer_cancel %}
                        <mt-button
                            size="small"
                            variant="secondary"
                            @click="onCancelShowPreview"
                        >
                            {{ $tc('global.default.close') }}
                        </mt-button>
                        {% endblock %}
                    </template>
                    {% endblock %}
                </sw-modal>
                {% endblock %}
                {% endblock %}
            </template>
        </sw-card-view>
    </template>
    {% endblock %}

    {% block sw_mail_template_detail_sidebar %}
    <template #sidebar>
        <sw-sidebar :propagate-width="true">
            {% block sw_mail_template_detail_sidebar_inner %}

            {% block sw_mail_template_detail_sidebar_inner_test_mail %}
            <sw-sidebar-item
                icon="regular-paper-plane"
                :title="$tc('sw-mail-template.detail.sidebar.titleTestMail')"
                class="sw-mail-template-detail__test-mail-sidebar"
            >
                <div class="sw-mail-template-detail__test-mail-sidebar-container">
                    <mt-banner
                        v-if="showLanguageNotAssignedToSalesChannelWarning"
                        variant="attention"
                    >
                        {{ $tc('sw-mail-template.detail.sidebar.languageNotAssignedToSalesChannel') }}
                    </mt-banner>

                    {% block sw_mail_template_mail_text_form_test_mail_field %}

                    <mt-text-field
                        v-model="testerMail"
                        name="sw-field--testerMail"
                        :placeholder="$tc('sw-mail-template.detail.sidebar.placeholderTestMail')"
                        :label="$tc('sw-mail-template.detail.sidebar.labelTestMail')"
                        :disabled="!acl.can('mail_templates.editor') || undefined"
                    />
                    {% endblock %}

                    {% block sw_mail_template_mail_text_form_test_sales_channel_field %}
                    <sw-entity-single-select
                        v-model:value="testMailSalesChannelId"
                        name="sw-field--testMailSalesChannelId"
                        entity="sales_channel"
                        :label="$tc('sw-mail-template.detail.basic.labelSalesChannels')"
                        :placeholder="$tc('sw-mail-template.detail.basic.placeholderSalesChannels')"
                        show-clearable-button
                    />
                    {% endblock %}

                    {% block sw_mail_template_mail_text_form_test_mail_button %}
                    <mt-button
                        :disabled="isSendButtonDisabled"
                        class="sw-mail-template-detail__send-test-mail"
                        variant="secondary"
                        @click="onClickTestMailTemplate"
                    >
                        {{ $tc('sw-mail-template.detail.sidebar.buttonTestMail') }}
                    </mt-button>
                    {% endblock %}
                </div>
            </sw-sidebar-item>
            {% endblock %}

            {% block sw_mail_template_detail_sidebar_inner_variables %}
            <sw-sidebar-item
                icon="regular-code"
                :title="$tc('sw-mail-template.detail.sidebar.titleShowAvailableVariables')"
                :disabled="isLoading || !hasTemplateData"
                class="sw-mail-template-detail__show-available-variables"
            >
                <div class="sw-mail-template-detail__available-variables-sidebar-container">
                    {% block sw_mail_template_available_variables_tree %}
                    <sw-tree
                        class="sw-mail-template-detail__available-variables-sidebar-container__tree"
                        :searchable="false"
                        :disable-context-menu="true"
                        :on-change-route="() => { return false; }"
                        :items="loadedAvailableVariables"
                        :sortable="false"
                        @get-tree-items="onGetTreeItems"
                    >
                        {% block sw_mail_template_available_variables_tree_headline %}
                        <template #headline>
                            <span></span>
                        </template>
                        {% endblock %}

                        {% block sw_mail_template_available_variables_tree_items %}
                        <template
                            #items="{ treeItems, sortable, draggedItem, disableContextMenu, onChangeRoute }"
                        >
                            {% block sw_mail_template_available_variables_tree_items_item %}
                            <sw-tree-item
                                v-for="(item, index) in treeItems"
                                :key="item.id"
                                :item="item"
                                :disable-context-menu="disableContextMenu"
                                :on-change-route="onChangeRoute"
                                :sortable="false"
                                :display-checkbox="false"
                            >
                                {% block sw_mail_template_available_variables_tree_items_item_grip %}
                                <template #grip>
                                    <span></span>
                                </template>
                                {% endblock %}

                                {% block sw_mail_template_available_variables_tree_items_item_actions %}
                                <template #actions="{ item }">
                                    <mt-icon
                                        v-tooltip="{
                                            message: $tc('sw-mail-template.detail.sidebar.copyTooltip'),
                                            width: 150,
                                            position: 'bottom'
                                        }"
                                        name="regular-products-s"
                                        class="sw-mail-template-detail__copy_icon"
                                        @click="onCopyVariable(item.schema)"
                                    />
                                </template>
                                {% endblock %}
                            </sw-tree-item>
                            {% endblock %}
                        </template>
                        {% endblock %}
                    </sw-tree>
                    {% endblock %}
                </div>
            </sw-sidebar-item>
            {% endblock %}

            {% block sw_mail_template_detail_sidebar_inner_preview %}
            <sw-sidebar-item
                icon="regular-eye"
                :title="$tc('sw-mail-template.detail.sidebar.titleShowPreview')"
                :disabled="isLoading || showPreview || !hasTemplateData"
                class="sw-mail-template-detail__show-preview-sidebar"
                @click="onClickShowPreview"
            />
            {% endblock %}

            {% block sw_mail_template_detail_sidebar_inner_media %}
            <sw-sidebar-media-item ref="mediaSidebarItem">
                <template
                    #context-menu-items="media"
                >
                    {% block sw_mail_template_detail_sidebar_add_attachment %}
                    <sw-context-menu-item
                        :disabled="!acl.can('mail_templates.editor') || undefined"
                        @click="onAddItemToAttachment(media.mediaItem)"
                    >
                        {{ $tc('sw-mail-template.detail.sidebar.labelContextMenuAddToMailTemplate') }}
                    </sw-context-menu-item>
                    {% endblock %}
                </template>
            </sw-sidebar-media-item>
            {% endblock %}

            {% endblock %}
        </sw-sidebar>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
